<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head><title>audio content</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css">
</head>

<body>
<f:view>
<f:loadBundle basename="ResourceBundle" var="bundle"/>
<h:form id="audioContentForm">
<div id="external">
    <div id="menu">
        <h:outputText value="#{bundle.menu_title}"/>
        <br>
        <%@ include file="menu.jsp" %>
    </div>
    <div id="languages">
        <div class="internal-languages">
            <strong>
                <h:commandLink value="EN"/>
                <h:commandLink value="HI"/>
                <h:commandLink value="TAM"/>
            </strong>
        </div>
    </div>
    <div id="content">
        <div id="title"> ${bundle.ad_audio_content_header}</div>

        <div id="top-left-filters">
            <br>
            <h:outputText value="#{bundle.find_content_by_id}"/>
            <h:inputText value="#{audioContentBean.filterId}" style="width: 50px"/>
            <h:commandButton value="#{bundle.ok_button}"
                             actionListener="#{audioContentBean.findAudioContentById}" style="width: 50px"/>

            <br>
            <h:outputText value="#{bundle.find_content_by_name}"/>
            <h:inputText value="#{audioContentBean.filterName}"/>
            <h:commandButton value="#{bundle.ok_button}"
                             actionListener="#{audioContentBean.findAudioContentByName}" style="width: 50px"/>

            <br>
            <h:outputText value="#{bundle.find_content_by_advertiser}"/>
            <h:inputText style="width: 100px" value="#{audioContentBean.filterAdvertiser}"/>
            <h:commandButton value="#{bundle.ok_button}"
                             actionListener="#{audioContentBean.findAudioContentByAdvertiser}" style="width: 50px"/>
        </div>

        <div id="top-right-filters">
            <br>
            <h:outputText value="#{bundle.rowCountOnPage}"/>
            <h:inputText style="width: 100px" value="#{audioContentBean.rows}"/>
            <h:commandButton actionListener="#{audioContentBean.restrictRows}" value="#{bundle.ok_button}"
                             style="width: 50px"/>
            <br>
            <h:outputText value="#{bundle.fullRowCount}"/>
            <h:inputText value="#{audioContentBean.rowCount}" style="width: 100px" readonly="true"/>
        </div>

        <div id="data-table">
            <h:dataTable value="#{audioContentBean.audioContents}" var="audioContent" border="1" width="100%"
                         headerClass="table-header">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="ad_ID"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.ad_id}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Category"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.category}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Name"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.name}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Advertiser"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.advertiser}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Description"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.description}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Viewing groups"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.viewingGroups}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Regions"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.regions}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Budget"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.budget}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Remaining"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.remaining}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Status"/>
                    </f:facet>
                    <h:outputText value="#{audioContent.status}"/>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Edit"/>
                    </f:facet>
                    <h:commandButton value="#{bundle.edit_button}" action="#{audioContentBean.editAudioContent}">
                        <f:param name="edit_audio_id" value="#{audioContent.ad_id}"/>
                    </h:commandButton>
                </h:column>

                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Delete"/>
                    </f:facet>
                    <h:commandButton value="#{bundle.delete_button}"
                                     actionListener="#{audioContentBean.deleteAudioContent}">
                        <f:param name="delete_audio_id" value="#{audioContent.ad_id}"/>
                    </h:commandButton>
                </h:column>

            </h:dataTable>

        </div>

        <div id="page-navigation">${bundle.navigation}</div>
        <div style="position:absolute;top: 55%; height: 5%; right: 5%">
            <h:commandButton value="#{bundle.addContentButton}" action="#{audioContentBean.toAddAudioContent}"/>
        </div>

        <div style="position: absolute;clear: left; background-color:#7ccff5; bottom: 27%; height: 8%; left:2%;right: 2%;">
            <strong><h:outputText value="#{bundle.choosing_by_region}:"/></strong>
            <h:selectManyCheckbox value="#{audioContentBean.chosenFilterRegions}" style="width: 100%">
                <f:selectItems value="#{audioContentBean.regions}"/>
            </h:selectManyCheckbox>
        </div>

        <div id="categories-filters">
            <strong><h:outputText value="#{bundle.choosing_by_category}:"/></strong>

            <div style="height:60%; overflow-y:scroll; word-wrap:break-word">
                <h:panelGrid columns="2">
                    <h:selectManyCheckbox layout="pageDirection" value="#{audioContentBean.chosenFilterCategories}"
                                          style="width: 100%">
                        <f:selectItems value="#{audioContentBean.categories}"/>
                    </h:selectManyCheckbox>
                </h:panelGrid>
            </div>

            <div style="height:20pt">
                <h:panelGrid columns="2">
                    <h:commandButton value="#{bundle.checkAllButton}"
                                     actionListener="#{audioContentBean.checkAllCategories}"/>
                    <h:commandButton value="#{bundle.uncheckAllButton}"
                                     actionListener="#{audioContentBean.clearAllCategories}"/>
                </h:panelGrid>
            </div>
        </div>

        <div id="statuses-filters">
            <div id="statuses-filters-inside">
                <h:outputText value="#{bundle.choosing_by_status}:"/>
                <h:selectOneMenu value="#{audioContentBean.chosenStatus}"
                                 valueChangeListener="#{audioContentBean.filterByStatus}">
                    <f:selectItems value="#{audioContentBean.statuses}"/>
                </h:selectOneMenu>
            </div>
        </div>

        <div id="budget-filter">
            <div id="budget-filter-inside">
                <h:outputText value="#{bundle.choosing_by_budget}:"/>
                <h:panelGrid columns="2">
                    <h:outputText value="from"/>
                    <h:inputText value="#{audioContentBean.from}"/>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <h:outputText value="to"/>
                    <h:inputText value="#{audioContentBean.to}"/>
                </h:panelGrid>
                <h:commandButton value="#{bundle.ok_button}"
                                 actionListener="#{audioContentBean.findAudioContentByGroupsRegionsStatusBudget}"/>
            </div>
        </div>
    </div>
</div>
</h:form>
</f:view>
</body>
</html>
